<template>
  <div>
    <div style="font-weight: bold; font-size: 22px; margin-bottom: 4px;">{{ total }}</div>
    <div ref="chartRef" style="width: 100%; height: 120px;"></div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
});
const total = ref(0);
const chartRef = ref(null);

const renderChart = () => {
  if (!chartRef.value) return;
  const myChart = echarts.init(chartRef.value);
  const xData = props.data.map(d => d._id);
  const yData = props.data.map(d => d.count);
  total.value = yData.reduce((sum, v) => sum + (v || 0), 0);
  myChart.setOption({
    grid: { left: '8%', right: '8%', top: 20, bottom: 20, containLabel: true },
    tooltip: {},
    xAxis: { data: xData },
    yAxis: {},
    series: [{
      itemStyle: { color: 'rgba(57,162,255)' },
      name: '已发货',
      type: 'bar',
      data: yData
    }]
  });
};

onMounted(renderChart);
watch(() => props.data, renderChart, { deep: true });
</script>

<style lang='scss' scoped>
/* 样式部分可以根据需要进行定义 */
</style>